/* Media query for Tablet devices (and potentially larger phones in landscape) */
@media (max-width: 1024px) {
    #largeContainer {
        width: 95%;
        margin: 0 auto;
        padding: 5px 10px 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    div[id^="tvshow_"] {
        width: 95%;
        max-width: none;
        margin: 0 auto 20px auto;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    div[id^="tvshow_"] .posterContainer {
        float: none;
        width: 80%;
        max-width: 200px;
        height: auto;
        margin: 0 auto 10px auto;
        padding: 0;
    }

    div[id^="tvshow_"] .infoTextContainer {
        width: 95%;
        height: auto;
        margin: 0;
        padding: 0 5px 5px 15px;
        text-align: left;
        line-height: 1.5;
    }

     div[id^="plot_"].plotIcon {
        position: relative;
        top: 10px;
        left: -240px;
    }

    button#menu-button {
        position: absolute;
        left: 25px;
        top: 10px;
        z-index: 100;
    }

    .infoContainerTextContainer {
        position: absolute;
        padding-left: 170px;
        top: 100px;
        left: auto;
        right: auto;
        width: auto;
    }

 .infoContainer {
    position: relative;
    vertical-align: top;
    border-bottom: solid 1px rgba(255, 255, 255, 0.3);
    width: 1240px;
    min-height: 250px;
    max-height: 450px;
    margin-right: 5px;
    margin-bottom: 15px;
    /* border-radius: 5px; */
    float: left;
    }

    .subTitleSeprator{
    border-bottom: 1px solid rgba(255,255,255,0.1);
    opacity: 0.2;
	cursor:default;
    position: absolute;
	width:400px;
	top:69px;
    right: 450px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.infoBackTitleSub{
	cursor:default;
    padding-bottom: 10px;
	text-shadow: 4px 4px 0 rgba(215,215,215,0.15);
    width: 950px;
	top:80px;
    right: 180px;
    text-align: center;
    position: absolute;
    font-size: 30px;
    opacity: 0.4;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.infoBackTitle{
	cursor:default;
	padding-bottom: 10px;
	text-shadow: 4px 4px 0 rgba(215,215,215,0.15);
	width: 950px;
	right: 180px;
	top:30px;
	text-align: center;
	position: absolute;
	font-size: 30px;
	opacity: 0.4;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

   .aniContainer {
    border: none;
    position: relative;
    float: left;
    vertical-align: top;
    display: block;
    width: 400px;
    min-width: 400px;
    max-width: 400px;
    /* max-height: 254px; */
    height: 460px;
    max-height: 460px;
    min-height: 460px;
    margin-right: 20px;
    margin-bottom: 20px;
    /* border-radius: 5px; */
    overflow: hidden;
}

  .aniContainer .posterImage {
    position: absolute;
    width: 230px;
    height: 380px;
    right: 90px;
    border-left: 2px solid #7A7A7A;
}

  .fancybox, .fancybox img {
    border: none;
}

    .detailsIcon img {
       border: none;
       background-size: contain;
       position: absolute;
       z-index: 8;
       cursor: pointer;
       opacity: 0.7;
       width: 50px;
       height: 25px;
       right: 100px;
       bottom: 80px;
       float: right;
}

  .youtube-player-wrapper{
    padding: 0px;
    aspect-ratio: 16 / 9;
    position: absolute;
    height: 100%;
    width: 65%;
    border: 3px solid #2f720f;
    background-color: white;
}

 body{
 font-size: 15px;

}

 .aniStudio.name {
    display: flex;
    flex-wrap: wrap;
  }

  .aniStudio.name span.value { /* Target the span.value specifically within this parent */
    display: inline-block; /* Assuming you want inline-block within the flex container */
    max-width: 150px; /* Or the desired max-width for two lines */
  }

body.sidebar-open #largeContainer {
  /* Adjust margin-left to make space for the sidebar */
  margin-left: 250px; /* Assumes sidebar width is 250px */
  /* Adjust width to fill the remaining space */
  width: calc(100% - 250px);
  /* Add a transition for a smooth effect */
  transition: margin-left 0.3s ease, width 0.3s ease;
}

/* Optional: Add a transition for the default state when sidebar closes */
#largeContainer {
   transition: margin-left 0.3s ease, width 0.3s ease;
}


body.sidebar-open .infoContainer {
  /* Adjust width to fit within the new #largeContainer width */
  width: 100%; /* This will make it take the full width of the adjusted #largeContainer */
  /* Add a transition if needed */
  transition: width 0.3s ease;
}

/* Optional: Add a transition for the default state */
.infoContainer {
   transition: width 0.3s ease;
}

.infoBackTitleContainer.sidebar-nav-open {
display: none;
}

#searchContainer{
  position: relative;
  left: 30px;
  bottom: 70px;
  width: 200px; /* add a width */
  height: 50px; /* add a height */
}

.homepage-link-container{
  display: inline-block;
  position: relative;
  top: 0;
  left: 900px; /* reduce the left value to a smaller number */
  width: 200px; /* add a width */
  height: 50px; /* add a height */
}

.value .star {
  color: gold;
  font-size: 15px;
}
}

.trailer-link {
  background-color: transparent;
  border: 1px solid #020202;
  padding: 1px 2px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.trailer-link i {
  margin-right: 5px;
  color: red;
}

.trailer-link:hover {
  background-color: #eaeaea;
  border: 1px solid #020202;
}

.trailer-link:focus {
  outline: none;
}

.reviews-link {
  background-color: transparent;
  border: 1px solid #020202;
  padding: 1px 2px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.reviews-link i {
  margin-right: 5px;
  color: rgba(230, 205, 63, 0.932);
}

.reviews-link:hover {
  background-color: #000000;
  border: 1px solid #020202;
}

.reviews-link:focus {
  outline: none;
}

.reviews-link:active {
    color: rgb(31, 211, 25);
}

.request-link {
  background-color: transparent;
  border: 1px solid #020202;
  padding: 1px 2px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #2db113;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.request-link i {
  margin-right: 5px;
  color: #63E6BE;
}

.request-link:hover {
  background-color: #000000;
  border: 1px solid #020202;
}

.request-link:focus {
  outline: none;
}

.request-link:active {
    color: rgb(31, 211, 25);
}

.top10-link {
  background-color: transparent;
  border: 1px solid #020202;
  padding: 1px 2px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #2db113;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.top10-link i {
  margin-right: 5px;
  color: #63E6BE;
}

.top10-link:hover {
  background-color: #000000;
  border: 1px solid #020202;
}

.top10-link:focus {
  outline: none;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 750px;
  height: 80%;
  max-height: 800px;
  overflow: auto;
  background-color: rgb(52,52,52);
  border: 3px solid #000000;
}

.modal-content {
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}

/* CSS styles for the modal video container */
.modal-video-container {
  position: relative;
  width: 95%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  overflow: hidden;
  border: 2px solid #2f720f;
  left: 15px;
  top: 10px;
}

.modal-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* CSS styles for the modal title and close button */
.modal-banner {
  background-color: #d3d3d3a2;
  color: #000000;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  border-bottom: 3px solid #000000;
}

.modal-title {
  margin-right: 10px;
}

.close {
  cursor: pointer;
  font-weight: bold;
}

/* Media query for Mobile devices (phones) */
@media (max-width: 768px) {

    #largeContainer {
        width: 98%;
        height: fit-content; 
    }

    div[id^="tvshow_"] {
        width: 98%;
        margin: 0 auto 15px auto;
    }

    div[id^="tvshow_"] .posterContainer {
        float: none;
        width: 90%;
        max-width: 180px;
        height: auto;
        margin: 0 auto 8px auto;
        padding: 0;
    }

    div[id^="infoTextContainer"] {
        width: 98%;
        height: auto;
        margin: 0;
        padding: 0 3px 3px 10px;
        text-align: left;
        line-height: 1.5;
    }


     div[id^="plot_"].plotIcon {
        position: relative;
        top: 10px;
        left: -240px;
    }

    button#menu-button {
        position: absolute;
        left: 25px;
        top: 10px;
        z-index: 100;
    }

     .infoContainerTextContainer {
        position: absolute;
        padding-left: 360px;
        top: 100px;
        left: 0;
        right: auto;
        width: 98%;
    }

    .infoContainer {
    position: relative;
    vertical-align: top;
    border-bottom: solid 1px rgba(255, 255, 255, 0.3);
    width: 1240px;
    min-height: 250px;
    max-height: 450px;
    margin-right: 5px;
    margin-bottom: 15px;
    /* border-radius: 5px; */
    float: left;
    }

    .subTitleSeprator{
    border-bottom: 1px solid rgba(255,255,255,0.1);
    opacity: 0.2;
	cursor:default;
    position: absolute;
	width:400px;
	top:69px;
    right: 490px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.infoBackTitleSub{
	cursor:default;
    padding-bottom: 10px;
	text-shadow: 4px 4px 0 rgba(215,215,215,0.15);
    width: 950px;
	top:80px;
    right: 180px;
    text-align: center;
    position: absolute;
    font-size: 30px;
    opacity: 0.4;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.infoBackTitle{
	cursor:default;
	padding-bottom: 10px;
	text-shadow: 4px 4px 0 rgba(215,215,215,0.15);
	width: 950px;
	right: 180px;
	top:30px;
	text-align: center;
	position: absolute;
	font-size: 30px;
	opacity: 0.4;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

    .aniContainer {
    border: none;
    position: relative;
    float: left;
    vertical-align: top;
    display: block;
    width: 400px;
    min-width: 400px;
    max-width: 400px;
    /* max-height: 254px; */
    height: 460px;
    max-height: 460px;
    min-height: 460px;
    margin-right: 20px;
    margin-bottom: 20px;
    /* border-radius: 5px; */
    overflow: hidden;
}

  .aniContainer .posterImage {
    position: absolute;
    width: 230px;
    height: 380px;
    right: 90px;
    border-left: 2px solid #7A7A7A;
}

  .fancybox, .fancybox img {
    border: none;
}

    .detailsIcon img {
       border: none;
       background-size: contain;
       position: absolute;
       z-index: 8;
       cursor: pointer;
       opacity: 0.7;
       width: 50px;
       height: 25px;
       right: 100px;
       bottom: 80px;
       float: right;
}

  .youtube-player-wrapper{
    padding: 0px;
    aspect-ratio: 16 / 9;
    position: absolute;
    height: 100%;
    width: 65%;
    border: 3px solid #2f720f;
    background-color: white;
}

 body{
 font-size: 15px;
}

 .aniStudio.name {
    display: flex;
    flex-wrap: wrap;
  }

  .aniStudio.name span.value { /* Target the span.value specifically within this parent */
    display: inline-block; /* Assuming you want inline-block within the flex container */
    max-width: 150px; /* Or the desired max-width for two lines */
  }

body.sidebar-open #largeContainer {
  /* Adjust margin-left to make space for the sidebar */
  margin-left: 250px; /* Assumes sidebar width is 250px */
  /* Adjust width to fill the remaining space */
  width: calc(100% - 250px);
  /* Add a transition for a smooth effect */
  transition: margin-left 0.3s ease, width 0.3s ease;
}

/* Optional: Add a transition for the default state when sidebar closes */
#largeContainer {
   transition: margin-left 0.3s ease, width 0.3s ease;
}


body.sidebar-open .infoContainer {
  /* Adjust width to fit within the new #largeContainer width */
  width: 100%; /* This will make it take the full width of the adjusted #largeContainer */
  /* Add a transition if needed */
  transition: width 0.3s ease;
}

/* Optional: Add a transition for the default state */
.infoContainer {
   transition: width 0.3s ease;
}

.infoBackTitleContainer.sidebar-nav-open {
   display: none;
}

#searchContainer{
  position: relative;
  left: 30px;
  bottom: 70px;
  width: 200px; /* add a width */
  height: 50px; /* add a height */
}

.homepage-link-container{
  display: inline-block;
  position: relative;
  top: 0;
  left: 900px; /* reduce the left value to a smaller number */
  width: 200px; /* add a width */
  height: 50px; /* add a height */
}

.value .star {
  color: gold;
  font-size: 15px;
}
}

.trailer-link {
  background-color: transparent;
  border: 1px solid #020202;
  padding: 1px 2px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.trailer-link i {
  margin-right: 5px;
  color: red;
}

.trailer-link:hover {
  background-color: #eaeaea;
  border: 1px solid #020202;
}

.trailer-link:focus {
  outline: none;
}

.reviews-link {
  background-color: transparent;
  border: 1px solid #020202;
  padding: 1px 2px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.reviews-link i {
  margin-right: 5px;
  color: rgba(230, 205, 63, 0.932);
}

.reviews-link:hover {
  background-color: #000000;
  border: 1px solid #020202;
}

.reviews-link:focus {
  outline: none;
}

.reviews-link:active {
    color: rgb(31, 211, 25);
}

.request-link {
  background-color: transparent;
  border: 1px solid #020202;
  padding: 1px 2px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #2db113;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.request-link i {
  margin-right: 5px;
  color: #63E6BE;
}

.request-link:hover {
  background-color: #000000;
  border: 1px solid #020202;
}

.request-link:focus {
  outline: none;
}

.request-link:active {
    color: rgb(31, 211, 25);
}

.top10-link {
  background-color: transparent;
  border: 1px solid #020202;
  padding: 1px 2px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #2db113;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.top10-link i {
  margin-right: 5px;
  color: #63E6BE;
}

.top10-link:hover {
  background-color: #000000;
  border: 1px solid #020202;
}

.top10-link:focus {
  outline: none;
}

.top10-link:active {
  color: rgb(31, 211, 25);
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 750px;
  height: 80%;
  max-height: 800px;
  overflow: auto;
  background-color: rgb(52,52,52);
  border: 3px solid #000000;
}

.modal-content {
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}

/* CSS styles for the modal video container */
.modal-video-container {
  position: relative;
  width: 95%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  overflow: hidden;
  border: 2px solid #2f720f;
  left: 15px;
  top: 10px;
}

.modal-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* CSS styles for the modal title and close button */
.modal-banner {
  background-color: #d3d3d3a2;
  color: #000000;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  border-bottom: 3px solid #000000;
}

.modal-title {
  margin-right: 10px;
}

.close {
  cursor: pointer;
  font-weight: bold;
}